<template>
  <el-drawer
    size="50%"
    title="添加至客群"
    direction="rtl"
    :model-value="true"
    :before-close="handleCancel"
  >
    <div class="form-wrapper">
      <el-form
        class="custom-form"
        ref="form"
        :rules="rules"
        :model="form"
        label-width="80px"
        :disabled="readOnly"
      >
        <el-form-item label="组件名称" prop="name">
          <el-input
            class="custom-input custom-input-name"
            v-model.trim="form.name"
            type="text"
            maxlength="15"
            :show-word-limit="true"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="选择客群" prop="userGroupId">
          <el-select
            v-model="form.userGroupId"
            filterable
            class="custom-input custom-input-name"
            placeholder="选择客群"
            clearable
          >
            <el-option
              v-for="item in groupList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <div style="flex: auto">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="validateNameForm">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script>
import CanvasApi from "@/api/canvasApi";
import {NodeDrawerDataModel} from "@/views/workTable/dataModel/NodeDrawerDataModel";
export default {
  props: {
    dialogData: {
      type: Object,
      default() {
        return {};
      },
    },
    addNodeEventData: {
      type: Object,
      default() {
        return {};
      },
    },
    readOnly: Boolean,
  },
  emits: ["confirm", "cancel"],

  data() {
    return {
      groupList: [],
      reachType: "7",
      form: {
        name: "添加至客群",
        userGroupId: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入组件名称",
          },
        ],
        userGroupId:[{
            required: true,
            message: "请选择客群",
            trigger: 'blur',
          }],
      },
    };
  },

  mounted() {

    this.getUserGroup();
    if (this.dialogData && Object.keys(this.dialogData).length) {
      this.form.name = this.dialogData.name;
      this.form.userGroupId = JSON.parse(this.dialogData.reachBody).userGroupId
    }

    if (
      Object.keys(this.addNodeEventData).length &&
      this.addNodeEventData.graph &&
      this.addNodeEventData.cell
    ) {
      const { graph, cell } = this.addNodeEventData;
      const edges = graph.getOutgoingEdges(cell);
      const weights =
        (edges &&
          edges.map((edgeModel) => ({
            weighted: edgeModel.getData().dialogData.weighted,
          }))) ||
        [];

      this.form.weights = weights;
    }
  },

  methods: {

    validateNameForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          
          this.handleConfirm();
        } else {
          
          return false;
        }
      });
    },
    async getUserGroup() {
      let params = {
        currentPage: 1,
        showCount: -1,
      };
      let rs = await CanvasApi.getUserGroupList(params);
      if (rs.code === 200) {
        this.groupList = rs.payload;
      }
    },

    handleCancel() {
      this.$emit("cancel");
    },

    handleConfirm() {
      if (!this.form.name) {
        this.$message.warning("请填写组件名称");
        return;
      }
      let params = {
        reachType: this.reachType,
        name: this.form.name,
        reachBody: {
          userGroupId: this.form.userGroupId
        },
      };
      params.reachBody = JSON.stringify(params.reachBody)
      this.$emit("confirm", new NodeDrawerDataModel({
        dialogData: params,
      }));
      this.handleCancel();
    },
  },
};
</script>

<style scoped lang="scss">
.form-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.custom-form {
  width: 70%;
  flex: 1;
}
.el-select {
  width: 100%;
}

</style>
